---
import { getPermalink } from "~/utils/permalinks";

import { APP_BLOG } from "astrowind:config";
import type { Post } from "~/types";

export interface Props {
  tags: Post["tags"];
  class?: string;
  title?: string | undefined;
  isCategory?: boolean;
}

const {
  tags,
  class: className = "text-sm",
  title = undefined,
  isCategory = false,
} = Astro.props;
---

{
  tags && Array.isArray(tags) && (
    <>
      <>
        {title !== undefined && (
          <span class="align-super font-normal underline underline-offset-4 decoration-2 dark:text-slate-400">
            {title}
          </span>
        )}
      </>
      <ul class={className}>
        {tags.map((tag) => (
          <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 rtl:mr-0 rtl:ml-2 mb-2 py-0.5 px-2 lowercase font-medium">
            {!APP_BLOG?.tag?.isEnabled ? (
              tag.title
            ) : (
              <a
                href={getPermalink(tag.slug, isCategory ? "category" : "tag")}
                class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
              >
                {tag.title}
              </a>
            )}
          </li>
        ))}
      </ul>
    </>
  )
}
